<template>
    <div class="app-container">
        <div class="page">
            <div class="header">
                <div class="word">
                    <div class="w1">
                        溯源管理系统
                    </div>
                    <div class="w2">
                        在溯源系统中你可以通过产品id，加工id等信息查询到产品的溯源信息，实现产品的溯源
                    </div>
                    <div class="w2">
                        溯源系统是加工系统中重要的一环,它可以为我们提供溯源的信息，为消费者提供更安心的商品
                    </div>
                </div>
                <img class="imgDri" src="">
            </div>
            <div class="index">
                <div class="search">
                    <el-input v-model="id" placeholder="请输入物流id" class="searchIuput">
                        <el-button slot="append" icon="el-icon-search" @click="mesSearch()" />
                    </el-input>
                </div>
            </div>
            <div class="show">
                <div class="a">
                    <div class="b1">采购批次：{{ mes.pickBatch }}</div>
                    <div class="b">运输方式：{{ mes.transporationMode}}</div>
                </div>
                <div class="a">
                    <div class="b1">产品名称：{{ mes.productName }}</div>
                    <div class="b">运输类型：{{ mes.transporationTools }}</div>
                </div>
                <div class="a">
                    <div class="c">发出地地址：{{ mes.transporationIn }}</div>
                </div>
                <div class="a">
                    <div class="c">接受地地址：{{ mes.transporationOut }}</div>
                </div>
                <div class="a">
                    <div class="c">销售地点：{{ mes.target }}</div>
                </div>
                <div class="a">
                    <div class="b1" style=" border-bottom: 1px solid black;">运输人员：{{ mes.transportionStaffName }}</div>
                    <div class="b" style=" border-bottom: 1px solid black;">联系电话：{{ mes.transportionStaffPhone }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import request from '../../utils/request'
export default {
    name: 'Traceability',

    data() {
        return {
            mes: {
                gmtCreate: "",
                gmtModified: "",
                id: "",
                isDelete: false,
                pickBatch: "",
                productName: "",
                target: "",
                transporationIn: "",
                transporationMode: "",
                transporationOut: "",
                transporationTools: "",
                transportionStaffName: "",
                transportionStaffPhone: "",
            },
            id: '',
        }
    },
    mounted() {
        this.dir()
        this.mesfind()
    },
    methods: {
        async mesfind() {
            await request({
                method: 'get',
                url: '/zk/logisticsTrace/getAll/1/5'
            }).then((response) => {
                console.log(response)
            })
        },
        async mesSearch() {
            await request({
                method: 'get',
                url: '/zk/logisticsTrace/getAllById/' + this.id
            }).then((response) => {
                console.log(response)
                this.mes = response.data[0]
            })
        },
        // async mesAddress() {
        //     await request({
        //         method: 'get',
        //         url: '/prot/sysRegion/getByPidsName/'  + "1774010588265975809/1/5"
        //     }).then((response) => {
        //         console.log(response)
        //     })
        // },

        dir(){
            this.$message({
              message: '请先搜索,后方可查看',
              type: 'warning'
            })
        }
    }
}
</script>
  
<style lang="scss" scoped>
.w1 {
    height: 80px;
    font-size: 25px;
    font-weight: 350;
}

.sel3 {
    width: 100px;
}

.index {
    margin-bottom: 20px;
    width: 95%;
}

.content {
    // width: 100%;
    display: flex;
    justify-content: center;
}

.searchIuput {
    width: 350px;
}

.w2 {
    height: 50px;
    font-size: 15px;
    font-weight: 250;
}

.imgDri {
    height: 300px;
    width: 400px;
}

.header {
    width: 100%;
    height: 350px;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    background-color: #ffffff;
}

.search {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.empty {
    width: 600px;
    height: 600px;
}

.page {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.q {
    width: 50%;
    background-color: black;
}

* {
    margin: 0;
    padding: 0;
}

.show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 900px;
    // border: 1px solid black;

    .a {
        height: 15%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .b {
            height: 100%;
            width: 40%;
            border-top: 1px solid black;

            border-right: 1px solid black;
            display: flex;
            align-items: center;
        } 
       .b1 {
            height: 100%;
            width: 40%;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            display: flex;
            align-items: center;
        }
        .c{
            height: 100%;
            width: 80%;
            border-right: 1px solid black;
            border-left: 1px solid black;
            // border: 1px solid black;
            border-top: 1px solid black;
            display: flex;
            align-items: center;
        }
    }
}
</style>
  